<template>
    <div class="content_main">
        <div class="page-title">{{ $t('Latest_Announcement') }}</div>
        <div class="content">

            <div class="list_hot" style="flex:2;">
                <div class="Card-header_card">
                    <div class="announcement">
                        <ul class="list_con" v-for="item in noticeList" :key="item.id" :title="item.article_title">
                            <a @click="$router.push(url+item.id)" target="_blank"><li><p>[{{ $t('announcements') }}] {{ item.article_title }}</p><span>{{ item.created_at }}</span></li></a>
                        </ul>
                    </div>
                </div>
                <p class="isNull isNull_notext" v-if="noticeList.length == 0">{{ $t('no_notice') }}</p>
                <el-pagination 
                    v-if="noticeList.length > 0"
                    class="pagination"
                    background 
                    layout="prev, pager, next" 
                    :total="totalRecords" 
                    :page-size="currentPage.limit" 
                    :current-page="currentPage.page" 
                    @current-change="handlePageChange" 
                />
            </div> 

            
            <ListHot/>
        </div>
        
        <RouterView/>
    </div>    
</template>

<script setup>
import ListHot from "@/components/Rank/ListHot/index.vue"  
import { RouterView } from "vue-router";
import axios from '@/utils/api'
import { reactive,ref } from "vue";
const url = '/home/announcement/announcementDetails/'


const noticeList = ref([])
const currentPage = reactive({ page: 1, limit: 11 });
const totalRecords = ref(0);
const getNoticeList = async () =>{
    const { page, limit } = currentPage;
    const list = await axios.get(`/getNoticeList?limit=${limit}&page=${page}`);
    noticeList.value = list.data.data
    totalRecords.value = list.data.total; 
    console.log(noticeList,'123');
}
getNoticeList()

const handlePageChange = (newPage) => {
    currentPage.page = newPage;
    getNoticeList();
};
</script>

<style lang="less" scoped>
.pagination{
    display: flex;
    justify-content: end;
    width: 80%;
}
.page-title {
    font-size: 24px;
    color: rgba(0, 0, 0, .85);
    letter-spacing: 1px;
    line-height: 32px;
    margin-bottom: 20px;
    margin-top: 30px;
}
.content {
    display: flex;
    // background-color: rgb(34, 192, 165);
    margin-top: 16px;
    .list_hot{
        .Card-header_card{
            width: 80%;
        }
        margin-bottom: 20px;
        .card-title{
            position: relative;
        }
        .title_SE4va{
            font-size: 24px;
            color: rgba(0, 0, 0, .8);
            letter-spacing: 1px;
            line-height: 32px;
        }

        .announcement{
            width: 100%;
            // height: 300px;
            // background-color: #1890ff;
            a{
                text-decoration: none;
                color: #000;
            }
            .list_con {
                padding: 5px 0;
                li{
                    list-style: none;
                    margin-bottom: 10px;
                    border-bottom: 1px solid #d9d9d9;
                    height: 30px;
                    cursor: pointer;
                    span{
                        float: right;
                        font-size: 13px;
                        line-height: 22px;
                        color: #7d7d7d;
                    }
                }
                li:hover{
                    color: @primary-color;
                    span{
                        color: @primary-color;
                    }
                    
                }
                p{
                    width: 70%;
                    margin-left: 0;
                    float: left;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
@media screen and (min-width: 1701px) {
    .content_main{
        width: 100% !important;

    }
}
</style>